<script setup name="HosBedForm">
import { ref, reactive,onMounted } from "vue";
import { Search, ArrowLeft, ArrowRight, Close, Aim } from '@element-plus/icons-vue';
import PageRigtIndex from "./components/PageRigt.vue";

import {selectData1,selectDataWeb1,saveData1,updateFun,getPageRigthDataObj,biaoshi ,tableRef} 
from "./js/InsertDeleteSelectUpdates";



const dataSourceTableConst = ref([]);
const SbjConst=ref({name: 'VxeSelect',options: []});    //社保局编码
const buttonConst=ref("");
const inputValue=ref("");
 

//查询数据源
const select1=async ()=>{
  const res =await selectData1('100098',{list:{lsmc:""},PageNo:"1",PageSize:"100",isDesc:"xpsm_auto_id",orderBy:"yab003"},"");
  dataSourceTableConst.value=res.ReContent.Content;
}
//查询社保局编码转码
const selectweb1=async ()=>{
  const res =await  selectDataWeb1('GetFixCode', { "bh":  " xp_sbjg"  });
  SbjConst.value.options= res.ReContent ;
}
//默认医保医保模式
const selectweb2=async ()=>{
  const res =await  selectDataWeb1('GetDefaultYbms', {});
  console.log(res.ReContent);
}
const selectweb3=async ()=>{
  const res =await  selectDataWeb1('GetXpmbCode', {});
  console.log(res.ReContent);
}

const update1=(row ,i )=>{
    updateFun(row,i,dataSourceTableConst.value);
} 


//isShowRightFun和isShowRightFun是右侧详细界面的显示和隐藏控制方法
const isShowRight = ref(false);
const isShowRightFun=()=>{
  isShowRight.value = !isShowRight.value;
}
//syzt和syztFun是右侧详细界面里面的使用状态点击后的字体和边框颜色的控制方法
const syzt=ref([
  {a:"1px solid #EBEBEB",b:"#333333"} ,
  {a:"1px solid #EBEBEB",b:"#333333"} ,
  {a:"1px solid #EBEBEB",b:"#333333"} 

]);
const syztFun=(event)=>{
  if(event.srcElement.innerText=="正常"){
    syzt.value[0].a="1px solid #359DE1";
    syzt.value[0].b="#359DE1";
    syzt.value[1].a="1px solid #EBEBEB";
    syzt.value[1].b=" #333333";
    syzt.value[2].a="1px solid #EBEBEB";
    syzt.value[2].b="#333333";
  }
  else if(event.srcElement.innerText=="停用"){
    syzt.value[1].a="1px solid #359DE1";
    syzt.value[1].b="#359DE1";
    syzt.value[0].a="1px solid #EBEBEB";
    syzt.value[0].b="#333333";
    syzt.value[2].a="1px solid #EBEBEB";
    syzt.value[2].b="#333333";
  }
  else if(event.srcElement.innerText=="申请中"){
    syzt.value[2].a="1px solid #359DE1";
    syzt.value[2].b="#359DE1";
    syzt.value[1].a="1px solid #EBEBEB";
    syzt.value[1].b="#333333";
    syzt.value[0].a="1px solid #EBEBEB";
    syzt.value[0].b="#333333";
  }
}

//3.2定义给右侧详细菜单页面的父传子方法和数据对象
 
const setPageRigthDataObjFun=(rowObj)=>{
   
  const $table = tableRef.value;
  dataSourceTableConst.value[$table.getRowSeq(rowObj)-1] =rowObj;
}

const pageNo = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});

const aa=ref('');




onMounted(()=>{
    select1();
    selectweb1();
    selectweb2();
});



</script>

<template>
<div class="main-content">
    <div class="main-content-case">
        <div class="admin-top">
            <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">医保片区</div>
            <el-select 
              style="width:200px;
                margin-left:8px" 
                v-model="inputValue" 
                clearable
                placeholder="全部">
                <el-option
                  v-for="item in SbjConst.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
            </el-select>
          </div>
          <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">搜索条件</div>
            <el-input v-model="inputValue" style="width: 180px;margin-left: 8px;"/>
          </div>
          <el-button type="primary" :icon="Search" style="width:72px" @click="getDataSourceTableConstFun()">查询</el-button>        
        </div>
        <div class="line"></div>
        <div class="button-case-table-case">
          <div class="button-case">
           
          <div class="button-case-box xpFontSyzt"  > 
            <img
                src="../../../assets/images/save_icon.png"
                style="width: 16px; height: 16px; margin-right: 2px"
                alt=""
                srcset=""
                />
            <el-popconfirm title="确认保存吗?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="saveFun()"
              @cancel="cancelEvent"
              >
              <template #reference>
                <div>保存</div>
              </template>
              
            </el-popconfirm>   
          </div>

          <div class="button-case-box xpFontSyzt" @click="saveFun()">
            <img
              src="../../../assets/images/daochu_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>导出</div>
          </div>

          <div class="button-case-box xpFontSyzt" @click="saveFun()">
            <img
              src="../../../assets/images/jiekou_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>修改PACS接口</div>
          </div>


          <div class="button-case-box xpFontSyzt" @click="saveFun()">
            <img
              src="../../../assets/images/picture_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>选择医院图片</div>
          </div>
          <div class="button-case-box xpFontSyzt" @click="isShowRightFun">
            <img
              src="../../../assets/images/bangding_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>详情</div>
          </div>
          
        </div>
        <div class="table-case">
          <vxe-table
            ref="tableRef"
            border
            height= auto  
            show-overflow
            :columnConfig="{resizable: true}"
            :row-config="{isCurrent:true,isHover:true}"
            :edit-config="{mode: 'cell', trigger: 'click',showIcon:false}"
            :data="dataSourceTableConst"
            :scroll-y="{enabled: true, gt: 0}"
            @editActivated="(row) => update1(row,1)"   
            @edit-closed="(row) => update1(row,2)"   
            @cell-click="(row) => update1(row,3)"   
             
           >
            
            <vxe-column field="saveFlag" title="标识" width="60">
              <template  #default="{ row }">
                <div style="color: red;"> {{biaoshi(row.saveflag)}} </div>
              </template>
            </vxe-column>
            <vxe-column field='bh'     title='编码'      width=60  >
            </vxe-column>
            <vxe-column field='yab003'     title='社保局'  width=160  :edit-render=SbjConst>
            </vxe-column>
            <vxe-column field='ybms_ybid'   title='医保模式'  width=80  >
            </vxe-column>
            <vxe-column field='akb020'   title='服务机构编码(医院编码)'  width=180    >
            </vxe-column>
            <vxe-column field='akb021'     title='服务机构名称(医院名称)'      width=180  :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='akb022' title='服务机构类型'    width=110  >
            </vxe-column>
            <vxe-column field='akb023'    title='医院等级' width=80  >
            </vxe-column>
            <vxe-column field='akb024'   title='法人姓名'  width=80  >
            </vxe-column>
            <vxe-column field='aae006'   title='地址'  width=200     >
            </vxe-column>
            <vxe-column   field='aae007'   title='邮政编码'    width=90    >
            </vxe-column>
            <vxe-column field='akb026' title='执业经营许可证号' width=150    >
            </vxe-column>
            <vxe-column field='akb027' title='药品经营企业合格证号' width=180  >
            </vxe-column>
            <vxe-column field='aae013'  title='组织机构代码'  width=180     >   
            </vxe-column>           
            <vxe-column field='gbbm'  title='国家编码'  width=180     >   
            </vxe-column>
            <vxe-column field='aae008'  title='银行行号'  width=180     >   
            </vxe-column>
            <vxe-column field='aae009'  title='户名'  width=180     >   
            </vxe-column>
            <vxe-column field='aae010'  title='银行账号'  width=160     >   
            </vxe-column>
            <vxe-column field='ykb001'  title='床位数量'  width=160     >   
            </vxe-column>
            <vxe-column field='baa010'  title='就医地统筹区编号'  width=160     >   
            </vxe-column>
            <vxe-column field='bka013'  title='异地就医清算分中心'  width=160     >   
            </vxe-column>

           








          </vxe-table>
        </div>
        </div>
       
        
    </div>
    <!-- v-slot可以简写成# -->
    <PageRigtIndex class="right-content" v-if="isShowRight"  @close="isShowRightFun">
      <template v-slot:titlename>
        详情
      </template>
      <template #main-content :getPageRigthDataObj="getPageRigthDataObj">
         <div>{{ getPageRigthDataObj.akb021 }}</div>
      </template>
      <template #button>
        <el-button  style="width:72px">取消</el-button>
        <el-popconfirm title="确认保存吗?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="saveFun()"
              @cancel="cancelEvent"
              >
              <template #reference>
                <el-button type="primary"   style="width:72px">保存</el-button>
              </template>
              
            </el-popconfirm>  
        
      </template>
    </PageRigtIndex>

</div>


</template>

<style lang="scss" scoped>
// :deep强制覆盖样式，提高!important优先级
:deep(::-webkit-scrollbar) {
    width: 10px !important;
    height: 10px !important;
}
// :deep强制覆盖样式，提高!important优先级
:deep(.vxe-cell--label) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-input--inner) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-cell--title) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight:400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-select) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight:400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}



//最外层灰色背景盒子
.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;
  //次外层白色背景盒子
  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    //顶部条件盒子32px
    .admin-top{
        display: flex;
        align-items: center;
        height: 32px;
        .admin-case-top {
            display: flex;
            align-items: center;
            margin-right: 16px;
        }
    }
    //顶部分割线条盒子1px,上下各12px外边距
    .line {
        width: 100%;
        height: 1px;
        background: #ebebeb;
        margin: 12px 0;
    }
    // 表格按钮盒子100%-32-25
    .button-case-table-case{
        height: calc(100% - 32px - 25px);
        width: 100%;
        border: 1px solid #EBEBEB;
        //按钮盒子
        .button-case{
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333333;
            padding: 10px 12px 10px 12px;
            height: 40px;

            .button-case-box {
                display: flex;
                align-items: center;
                margin-right: 12px;
                cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
            }
          }
          .table-case{
              width: 100%;
              height: calc(100% - 40px);
            
          }
    }
    
    
  }
  //右侧弹窗的整个盒子856宽
    .right-content{
      width:856px;
      height: calc(100vh - 94px);
      position: fixed;
      z-index: 2000;
      top: 91px;
      right: 0;

      .right-content-content{
        width: 100%; 
        height: 100%;
        overflow-y: scroll;
        padding: 12px;
          .right-content-content-title{
          padding-bottom: 12px;
          display: flex;
            .right-content-content-title-text{
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: bold;
              font-size: 14px;
              color: #333333;
              line-height: 20px;
              text-align: left;
              font-style: normal;
              text-transform: none;
          }
       
        }
        .right-content-content-content{
          
          width: 100%;
          height: 32px;
          margin-bottom: 16px;
          // background-color: aquamarine;
          display: flex;
          .right-content-content-content-left{
            width: calc(50% - 8px);
            height: 32px;
            margin-right: 16px;
            // background-color: rgb(92, 181, 151);
            display: flex;
            align-items: center; /* 垂直居中 */
            .right-content-content-content-left-label{
              margin-right: 8px;
              
            }
            
          }
          .right-content-content-content-right{
            width: calc(50% - 8px);
            height: 32px;
            // background-color: rgb(22, 180, 22);
            display: flex;
            align-items: center; /* 垂直居中 */
            .right-content-content-content-left-label{
              margin-right: 8px;
              
            }
          }
        }
      }
  }

}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontSyzt{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>